#{extends 'main.html' /} #{set title: 'Realizar Pedido' /}
<script>
	function formataMoeda(numero, casasDecimais, separadorDecimal,
			separadorMilhar, unidadeMoeda) {
		casasDecimais = isNaN(casasDecimais = Math.abs(casasDecimais)) ? 2
				: casasDecimais;
		separadorDecimal = separadorDecimal == undefined ? ","
				: separadorDecimal;
		separadorMilhar = separadorMilhar == undefined ? "." : separadorMilhar;
		unidadeMoeda = unidadeMoeda == undefined ? "" : unidadeMoeda + " ";
		var sinal = numero < 0 ? "-" : "";
		var parteInteira = parseInt(numero = Math.abs(+numero || 0).toFixed(
				casasDecimais))
				+ "";

		var j = (j = parteInteira.length) > 3 ? j % 3 : 0;
		return unidadeMoeda
				+ sinal
				+ (j ? parteInteira.substr(0, j) + separadorMilhar : "")
				+ parteInteira.substr(j).replace(/(\d{3})(?=\d)/g,
						"$1" + separadorMilhar)
				+ (casasDecimais ? separadorDecimal
						+ Math.abs(numero - parteInteira)
								.toFixed(casasDecimais).slice(2) : "");
	}

	function exibirPreco(t) {
		var precoTotal = parseFloat(document.formPedido.altura.value)
				* parseFloat(document.formPedido.largura.value) * parseFloat(t);
		document.getElementById("getPreco").innerHTML = "<b>Preço por m²:</b>"
				+ formataMoeda(t, 2, '.', ',', 'R$');
		document.getElementById("total").innerHTML = "<h3><b>Total a pagar: </b>"
				+ formataMoeda(precoTotal, 2, '.', ',', 'R$') + "</h3>";
	}
	
	function exibirTelaConfirma() {
	    window.open("@{ControllerPedido.confirmarPedido()}", "_top");
  	}
	
</script>

<form name="formPedido" action="@{ControllerPedido.fazerPedido()}" method="GET">
	<table class="form">
		<tr>
			<th></th>
			<td><br>
				<h2 align="center">Informações do Cliente</h2>
				<span id = "info"><b>Nome: </b> 
					${cl.getNome()}<br> <b>Endereço: </b> ${cl.getEndereco()}<br>
					#{if cl.getTipo() == "física"} <b>CPF: </b> ${cl.getCpf_cnpj()} <br>#{/if}
					#{if cl.getTipo() == "jurídica"} <b>CNPJ: </b> ${cl.getCpf_cnpj()} <br>#{/if}
				</span>
			</td>
		</tr>

		<th>
		<td><br>
			<h2 align="center">Características do Produto</h2></td>
		</th>
		<tr>
			<th>Nome:</th>
			<td><input class="inp-text" name="nomeProd" id="nomeProd"
				type="text" size="30" maxlength="50"/></td>
		</tr>

		<th>
		<td><br>
			<h4>Dimensões do Vidro</h4></td>
		</th>
		<tr>
			<th>Altura:</th>
			<td><input class="end-uf" name="altura" id="altura" type="text"
				size="30" /> Largura: <input class="end-uf" name="largura"
				id="largura" type="text" size="30" /></td>
		</tr>
		
		<th>
			<td><br><h4>Tipo de material a ser utilizado</h4></td>
		</th>
		<tr>
			<th>Tipo de material:</th>
			<td><select name="lstMateriais" id="lstMateriais">
					#{list items: list, as: 't'}
					<option onclick="exibirPreco('${t.getPreco()}')">${t.getNome()}</option>
					#{/list}
			</select> <span id="getPreco"></span></td>
		</tr>
		<th>
		<td><hr id="total"></hr></td>
		</th>
		<tr>
			<td class="submit-button-right" colspan="2"><br> <br>
				<input type="submit" class="submit-text" onclick="exibirTelaConfirma()" value="Realizar Pedido" />
		</tr>
	</table>
</form>